<template>
	<view class="party">
		<view class="con">
			<view v-for="(item, index) in list" :key="index" class="item" @click="goInfo(item)">
				<image class="left" mode="aspectFill" :src="item.img" />
				<view class="right">
					<view class="top">
						<view class="title ">菜肴：{{ item.title }}</view>
						<view class="desc ">
							<text style="margin-left: 10rpx;">菜系：{{ item.classify }}</text>
						</view>
						<view class="desc ">
							<text style="margin-left: 10rpx;">原料：{{ item.origial }}</text>
						</view>
					</view>
				</view>
                <view class="circle">
                    <u-icon name="plus-circle" size="40"></u-icon>
                </view>
			</view>
			<u-loadmore :status="isNoMore ? 'nomore' : 'loading'" fontSize="28" iconSize="34" />
		</view>
	</view>
</template>

<script>
import { activityPage } from '@/api/data'
import storage from "@/utils/storage";
export default {
	data() {
		return {
			param: {
				pageNumber: 1,
				pageSize: 10,
				title: ''
			},
			list: [
                {
                    title:'糖醋里脊',
                    classify:'鲁菜',
                    origial:'里脊肉、鸡蛋、玉米淀粉、各种调味料',
                    img:'../../static/6.png',
                    
                },
                {
                    title:'木须肉',
                    classify:'鲁菜',
                    origial:'里脊肉、鸡蛋、黄瓜、胡萝卜、黑木耳、各种调味料',
                    img:'../../static/7.png',
                    
                },
                {
                    title:'爆炒腰花',
                    classify:'鲁菜',
                    origial:'猪腰、姜、蒜苗、辣椒、各种调味料',
                    img:'../../static/8.png',
                    
                },
                {
                    title:'油闷大虾',
                    classify:'鲁菜',
                    origial:'大虾、葱姜蒜适量、各种调味料',
                    img:'../../static/9.png',
                    
                },
                {
                    title:'炸蜊黄',
                    classify:'闽菜',
                    origial:'菜花、豆腐、淀粉、小麦面粉',
                    img:'../../static/10.png',
                    
                },
            ],
			isNoMore: false,

		}
	},
	onLoad() {
		// this.getList('cover')
	},
	methods: {
		//滚动加载
		reachBottom() {
			if (this.isNoMore) return;
			this.param.pageNumber++;
			this.getList();
		},
		// 获取社团活动列表
		getList(status) {
			activityPage(this.param).then((res) => {
				if (res.code == '200') {
					res.data.records = res.data.records.map(e => {
						return {
							...e,
							coverImage: 'http://127.0.0.1:4444/api/upload/' + e.coverImage,
							startTime: uni.$u.timeFormat(res.data.startTime, "yyyy-mm-dd"),
							endTime: uni.$u.timeFormat(res.data.endTime, "yyyy-mm-dd"),
							signUpStartTime: uni.$u.timeFormat(res.data.signUpStartTime, "yyyy-mm-dd"),
							signUpEndTime: uni.$u.timeFormat(res.data.signUpEndTime, "yyyy-mm-dd"),
						}
					})
					if (status === "cover") {
						this.list = res.data.records;
					} else {
						this.list = [...this.list, ...res.data.records];
					}
					if (res.data.records.length < this.param.pageSize) {
						this.isNoMore = true;
					} else {
						this.isNoMore = false;
					}
				}
			})
		},
		// 跳转社团活动详情
		goInfo(item) {
			let token = storage.getToken();
			if (!token) {
				// 未登录
				uni.showModal({
					title: '您还未登录',
					content: '是否先进行登录？',
					cancelText: '取消',
					confirmText: '确定',
					success: function (res) {
						if (res.confirm) {
							setTimeout(() => {
								uni.navigateTo({ url: '/pages/login/login' })
							}, 2000)
							// 用户点击确定按钮的逻辑处理
						} else if (res.cancel) {
							// 用户点击取消按钮的逻辑处理
						}
					}
				});
			} else {
				const id = item?.id;
				const societiesId = item?.societiesId;
				if (!id) return;
				uni.navigateTo({ url: `/pages/party/info?id=${id}&societiesId=${societiesId}` });
			}
		},
	}
}
</script>

<style scoped lang="scss">
.party {
	box-sizing: border-box;
	width: 100%;
	background: #f4f4f4;
	height: 100vh;
	overflow: hidden;
	padding: 20rpx;

	.con {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow-y: scroll;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-bottom: 50rpx;

		.item {
			width: 100%;
			display: flex;
			background-color: #fff;
			padding: 20rpx;
			padding-left: 10rpx;
			border-radius: 30rpx;
			margin-bottom: 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 8rpx 12rpx -4rpx rgba(0, 0, 0, 0.1), 0 8rpx 16rpx -8rpx rgba(0, 0, 0, 0.1);
            position: relative;
            .circle{
                position: absolute;
                right: 20rpx;
                top: 20rpx;
            }

			.left {
				height: 200rpx;
				border-radius: 30rpx;
				box-sizing: border-box;
				width: 30%;
			}

			.right {
				width: 70%;
				box-sizing: border-box;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 20rpx;

				.top {
					width: 100%;
					display: flex;
					flex-direction: column;

					.title {
						width: 100%;
						font-size: 30rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 20rpx;
						margin-top: 14rpx;
					}

					.desc {
						width: 100%;
						font-size: 26rpx;
						color: #999;
						margin-bottom: 15rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						&:last-child {
							margin-bottom: 0 !important;
						}

						.tags {
							margin-right: 20rpx;
						}
					}
				}

				.line {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 24rpx;

					.join {
						font-size: 24rpx !important;
						background-color: var(--greyLight);
						color: #999;
						border-radius: 10rpx;
						line-height: 2;
						padding: 0 25rpx;
						border-top-right-radius: 20rpx !important;
						border-bottom-left-radius: 20rpx !important;
					}

					.comm {
						background-color: var(--projectCompareColor);
						color: #fff;
					}



					.users {
						flex: 1;
						display: flex;
						align-items: center;
					}

					.pic-group {
						display: flex;
						padding: 0 10rpx 0 0rpx;
						align-items: center;
					}

					.pic-group .pic {
						width: 48rpx !important;
						height: 48rpx !important;
						margin-left: -20rpx;
						border: 50% solid #fff;
						vertical-align: middle;

						&:first-child {
							margin-left: 0rpx;
						}
					}

					.num {
						font-size: 24rpx;
						color: #bbb;
					}
				}
			}
		}

	}
}
</style>
